<template>
  <div class="crm-dg__list">
    <div v-for="(item, index) in gridList" class="crm-dg__item" :key="index">
      <router-link class="crm-dg__link" :to="item.link">
        <div class="crm-dg__left">
          <img class="crm-dg__ico" :src="item.icon"/>
        </div>
        <div class="crm-dg__right">
          <span class="crm-dg__ttext">{{ item.ttext }}</span>
          <span class="crm-dg__btext">{{ item.btext }}</span>
        </div>
      </router-link>
    </div>
  </div>
</template>


<script>
  export default {
    props: {
    gridList : {

      required: true
    }
    },
    data () {
    return {

    };
    },

    mounted () {
      console.log('图片服务器:', JSON.stringify(this.gridList));
    },

    computed:{

    }
  }
</script>

<style lang="less">
    @import "../less/base";

    .crm-dg__list {
     &:extend(.clearfix all);

     display: block;
     width: 100%;
    }

    .crm-dg__item {
      width: 50%;
      float: left;
      margin-bottom: 20px;

      .crm-dg__link {

        &:extend(.clearfix all);

        width: 100%;
        display: block;

        &>*{
        float: left;
        }
      }

      .crm-dg__left {

        height: @data-grid-item-size;
        width: @data-grid-item-size;

        .crm-dg__ico{
          width: 100%;
          height: 100%;
          border-radius: @data-grid-ico-raius;
        }
      }

      .crm-dg__right{

        line-height: normal;
        padding-left: 10px;
        font-size: 14px;
        max-width: 63%;

        &>*{
          display: block;
          height: @data-grid-item-size/2;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .crm-dg__ttext{
          color:#8F939A;
        }

        .crm-dg__btext{
          color: #232323;
        }
      }

    }

    @media(min-width:640px) {
      .crm-dg__item {
        width: 10rem
      }
    }
</style>
